<html>
    <head>
        <title>Timeline</title>
        <script src="http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js" type="text/javascript">
        </script>
        <script>
            var tl;
            function onLoad(){
                themeSwitch()
                var eventSource = new Timeline.DefaultEventSource();
                var bandInfos = [Timeline.createBandInfo({
                    eventSource: eventSource,
                    date: "Jan 1 2011 00:00:00 GMT",
                    width: "70%",
                    intervalUnit: Timeline.DateTime.MONTH,
                    intervalPixels: 100
                }), Timeline.createBandInfo({
                    eventSource: eventSource,
                    date: "Jan 1 2011 00:00:00 GMT",
                    width: "30%",
                    intervalUnit: Timeline.DateTime.YEAR,
                    intervalPixels: 200
                })];
                bandInfos[1].syncWith = 0;
                bandInfos[1].highlight = true;
                //		bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter
                //				.getLayout());
                tl = Timeline.create(document.getElementById("timeline"), bandInfos);
                Timeline.loadXML("/public/xml/jfk.xml", function(xml, url){
                    eventSource.loadXML(xml, url);
                });
            }
            
            var resizeTimerID = null;
            function onResize(){
                if (resizeTimerID == null) {
                    resizeTimerID = window.setTimeout(function(){
                        resizeTimerID = null;
                        tl.layout();
                    }, 500);
                }
                
            }
            
            function themeSwitch(){
                var timeline = document.getElementById('timeline');
                timeline.className = (timeline.className.indexOf('dark-theme') != -1) ? timeline.className.replace('dark-theme', '') : timeline.className += ' dark-theme';
                
            }
        </script>
        <style type="text/css">
            .t-highlight1 {
                background-color: #ccf;
            }
            
            .p-highlight1 {
                background-color: #fcc;
            }
            
            .timeline-highlight-label-start .label_t-highlight1 {
                color: #f00;
            }
            
            .timeline-highlight-label-end .label_t-highlight1 {
                color: #aaf;
            }
            
            .timeline-band-events .important {
                color: #f00;
            }
            
            .timeline-band-events .small-important {
                background: #c00;
            }
            
            /*---------------------------------*/
            .dark-theme {
                color: #eee;
            }
            
            .dark-theme .timeline-band-0 .timeline-ether-bg {
                background-color: #333
            }
            
            .dark-theme .timeline-band-1 .timeline-ether-bg {
                background-color: #111
            }
            
            .dark-theme .timeline-band-2 .timeline-ether-bg {
                background-color: #222
            }
            
            .dark-theme .timeline-band-3 .timeline-ether-bg {
                background-color: #444
            }
            
            .dark-theme .t-highlight1 {
                background-color: #003;
            }
            
            .dark-theme .p-highlight1 {
                background-color: #300;
            }
            
            .dark-theme .timeline-highlight-label-start .label_t-highlight1 {
                color: #f00;
            }
            
            .dark-theme .timeline-highlight-label-end .label_t-highlight1 {
                color: #115;
            }
            
            .dark-theme .timeline-band-events .important {
                color: #c00;
            }
            
            .dark-theme .timeline-band-events .small-important {
                background: #c00;
            }
            
            .dark-theme .timeline-date-label-em {
                color: #fff;
            }
            
            .dark-theme .timeline-ether-lines {
                border-color: #555;
                border-style: solid;
            }
            
            .dark-theme .timeline-ether-highlight {
                background: #555;
            }
            
            .dark-theme .timeline-event-tape, .dark-theme .timeline-small-event-tape {
                background: #f60;
            }
            
            .dark-theme .timeline-ether-weekends {
                background: #111;
            }
        </style>
    </head>
    <body onload="onLoad();" onresize="onResize();">
        <div id="timeline" style="height: 450px; border: 1px solid #aaa;width:800px;">
        </div>
        <div>
            Drag the timeline right and left to view all dates or use scroll wheel
        </div>
    </body>
</html>
